<template>
  <div class="body">
    <div class="container">
      <div class="from-box" ref="btn">
        <!-- 注册 -->
        <el-form ref="regForm" :model="regForm" :rules="regRules" autocomplete="off">
          <div class="register-box hidden" ref="registerbox">
            <h1>register</h1>
            <i class="icon el-icon-user"></i>
            <el-form-item prop="username">
              <el-input type="text" placeholder="用户名" v-model="regForm.username" />
            </el-form-item>
            <!-- <i class="icon el-icon-message"></i>
            <el-form-item prop="email">
              <el-input type="email" placeholder="邮箱" v-model="regForm.email" />
            </el-form-item> -->
            <i class="icon el-icon-lock"></i>
            <el-form-item prop="password">
              <el-input type="password" placeholder="密码" v-model="regForm.password" />
            </el-form-item>
            <i class="icon el-icon-unlock"></i>
            <el-form-item prop="repassword">
              <el-input type="password" placeholder="确认密码" v-model="regForm.repassword" />
            </el-form-item>
            <el-button @click="registerFn">注册</el-button>
          </div>
        </el-form>
        <!-- 登录 -->
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="off">
          <div class="login-box" ref="loginbox">
            <h1>login</h1>
            <i class="icon el-icon-user"></i>
            <el-form-item prop="username">
              <el-input type="text" placeholder="用户名" v-model="loginForm.username" />
            </el-form-item>
            <i class="icon el-icon-lock"></i>
            <el-form-item prop="password">
              <el-input type="password" placeholder="密码" v-model="loginForm.password" />
            </el-form-item>
            <el-button @click="loginFn">登录</el-button>
          </div>
        </el-form>
      </div>
      <div class="con-box left">
        <h2>欢迎来到<span>我的博客</span></h2>
        <p>快来注册你的专属<span>账号</span>把</p>
        <img src="@/assets/images/icon2.jpg" alt="图片加载失败" style="border-radius: 50%;" />
        <p>已有账号?</p>
        <button @click="login">去登录</button>
      </div>
      <div class="con-box right">
        <h2>欢迎来到<span>我的博客</span></h2>
        <p>看看我的<span>博客</span>把（账号:testxm/123456）</p>
        <img src="@/assets/images/baby.jpg" alt="图片加载失败" style="border-radius: 50%;" />
        <p>没有账号?</p>
        <button @click="register">去注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import { registerAPI, loginAPI } from '@/api/index'
import { mapMutations } from 'vuex'
export default {
  name: 'my-register',
  data() {
    const samePwdFn = (rule, value, callback) => {
      if (value !== this.regForm.password) {
        // 如果验证失败，则调用 回调函数时，指定一个 Error 对象。
        callback(new Error('两次输入的密码不一致!'))
      } else {
        // 如果验证成功，则直接调用 callback 回调函数即可。
        callback()
      }
    }
    return {
      // 注册-表单的数据对象
      regForm: {
        username: '', // 用户名
        email: '', // 邮箱
        password: '', // 密码
        repassword: '' // 确认密码
      },
      // 注册-表单规则验证对象
      regRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: '用户名必须是1-10的大小写字母数字',
            trigger: 'blur'
          }
        ],
        email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15的非空字符',
            trigger: 'blur'
          }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15的非空字符',
            trigger: 'blur'
          },
          { validator: samePwdFn, trigger: 'blur' }
        ]
      },
      // 登录-表单的数据对象
      loginForm: {
        username: '', // 用户名
        password: '' // 密码
      },
      // 登录-表单规则验证对象
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]{1,10}$/,
            message: '用户名必须是1-10的大小写字母数字',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15的非空字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 注册跳转登录
    register() {
      this.$refs.btn.style.transform = 'translateX(80%)'
      this.$refs.loginbox.classList.add('hidden')
      this.$refs.registerbox.classList.remove('hidden')
      // 清空表单数据
      this.$refs.regForm.resetFields()
    },
    // 登录跳转注册
    login() {
      this.$refs.btn.style.transform = 'translateX(0%)'
      this.$refs.registerbox.classList.add('hidden')
      this.$refs.loginbox.classList.remove('hidden')
      // 清空表单数据
      this.$refs.loginForm.resetFields()
    },
    // 注册 -->点击事件
    registerFn() {
      this.$refs.regForm.validate(async (valid) => {
        if (valid) {
          // 通过校验
          // console.log(this.regForm)
          // 1.调用注册接口
          const { data: res } = await registerAPI(this.regForm)
          // console.log(res)
          // 2.注册失败,提示用户
          if (res.code !== 0) return this.$message.error(res.message)
          // 3.注册成功,提示用户
          this.$message.success({
            message: `${res.message}`,
            duration: 2000,
            customClass: 'windthClass'
          })
          // 4.跳转到登录页面
          this.login()
        } else {
          // 阻止默认的提交行为(表单下面的红色提示会自动出现)
          return false
        }
      })
    },
    ...mapMutations(['updateToken']),
    // 登录 -->点击事件
    loginFn() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 通过校验
          // console.log(this.loginForm)
          // 1.调用注册接口
          const { data: res } = await loginAPI(this.loginForm)
          // console.log(res)
          // 2.注册失败,提示用户
          if (res.code !== 0) return this.$message.error(res.message)
          // 3.注册成功,提示用户
          this.$message.success({
            message: `${res.message}`,
            duration: 2000,
            customClass: 'windthClass'
          })
          // 4.保存token
          this.updateToken(res.token)
          // 5.跳转到首页
          this.$router.push('/')
          // this.$router.push('/') // 为什么放在这里报错,提示未定义的resetFields?
        } else {
          // 阻止默认的提交行为(表单下面的红色提示会自动出现)
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #f3e7e9, #e3eeff);
  // background-image: url('./assets/images/meinv.jpg');
  // background-repeat: no-repeat;
  // background-size: 100%;
}

.container {
  background-color: #fff;
  width: 650px;
  height: 415px;
  border-radius: 5px;
  /* 阴影 */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  /* 相对定位 */
  position: relative;
}

.from-box {
  /* 绝对定位 */
  position: absolute;
  top: -10%;
  left: 5%;
  background-color: #d3b7d8;
  width: 320px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  /* 动漫过渡 加速后减速 */
  transition: 0.5s ease-in-out;
}

.register-box,
.login-box {
  position: relative;
  /* 弹性布局 垂直排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  // width: 100%;
  width: 320px;
}

/deep/ .el-input__inner {
  background-color: transparent;
  border-radius: 0;
  color: #fff;
  border: none;
  /* 下边框样式 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  text-indent: 10px;
}

/deep/ .el-input__inner::placeholder {
  color: #fff;
}

/deep/ .el-input__inner:focus {
  color: #a262ad;
  outline: none;
  border-bottom: 1px solid #a262ad80;
  transition: 0.5s;
}

/deep/ .el-input__innert:focus::placeholder {
  opacity: 0;
}

.login-box>.icon {
  position: absolute;
  font-size: 16px;
  left: 60px;
  // top: 61px;
  top: 75px;
  color: #fff;
}

.login-box>.icon:last-of-type {
  // top: 123px;
  top: 137px;
}

.register-box>.icon {
  position: absolute;
  font-size: 16px;
  left: 60px;
  // top: 249px;
  top: 263px;
  color: #fff;
}

.register-box>.icon:nth-of-type(1) {
  // top: 61px;
  top: 74px;
}

.register-box>.icon:nth-of-type(2) {
  // top: 124px;
  top: 138px;
}

.register-box>.icon:nth-of-type(3) {
  // top: 186px;
  top: 201px;
}

.hidden {
  display: none;
  transition: 0.5s;
}

h1 {
  text-align: center;
  margin-bottom: 25px;
  /* 大写 */
  text-transform: uppercase;
  color: #fff;
  /* 字间距 */
  letter-spacing: 5px;
}

.from-box button {
  width: 70%;
  margin-top: 35px;
  background-color: #f6f6f6;
  outline: none;
  border-radius: 8px;
  padding: 13px;
  color: #a262ad;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
}

.from-box button:hover {
  background-color: #a262ad;
  color: #f6f6f6;
  transition: background-color 0.5s ease;
}

.con-box {
  width: 50%;
  /* 弹性布局 垂直排列 居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 绝对定位 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.con-box.left {
  left: -2%;
}

.con-box.right {
  right: -2%;
}

.con-box h2 {
  color: #8e9aaf;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 4px;
}

.con-box p {
  font-size: 12px;
  letter-spacing: 2px;
  color: #8e9aaf;
  text-align: center;
}

.con-box span {
  color: #d3b7d8;
}

.con-box img {
  width: 150px;
  height: 150px;
  opacity: 0.9;
  margin: 40px 0;
}

.con-box button {
  margin-top: 3%;
  background-color: #fff;
  color: #a262ad;
  border: 1px solid #d3b7d8;
  padding: 6px 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
}

.con-box button:hover {
  background-color: #d3b7d8;
  color: #fff;
}

.windthClass {
  min-width: 200px;
}
</style>
